<script setup lang="ts">
import { reactive } from 'vue'
import { get } from 'lodash-es'
import YongDianLiang from './yongdianliang.vue'
import YongDianLiangDay from './yongdianliangDay.vue'
import useDashboardStore from '@/store/modules/dashboard'
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()

const dashboardStore = useDashboardStore()

dashboardStore.getEntDashboard([userStore.userInfo.AffiliatedObjId])

const baseInfoConfig = reactive([
  {
    name: '产污设施',
    path: '/document/manager',
    prop: 'ProduceCount',
  }, {
    name: '监测点数',
    path: '/document/manager',
    prop: 'ElectricDeviceCount',
  },
  {
    name: '在线',
    prop: 'OnlineDevNum',
    path: '/statistics/online',
  },
  {
    name: '停电',
    prop: 'PowerOffDevNum',
    path: '/statistics/online',
  },
  {
    name: '失联',
    prop: 'DisconnectDevNum',
    path: '/statistics/online',
  },
])
const deviceConfig = reactive([
  {
    name: '污处异常',
    path: '/data-query/pollute-err',
    prop: 'ReuseExCount',
  }, {
    name: '停上电事件',
    path: '/data-query/power-off',
    prop: 'PowerSupplyCount',
  },
])

const router = useRouter()
function toPage(item: any) {
  router.push(item.path)
}
</script>

<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <el-col :span="12">
        <PageMain title="基本信息">
          <div class="flex flex-content-between">
            <div v-for="item in baseInfoConfig" :key="item.name" class="flex-1">
              <el-statistic
                class="text-center" :title="item.name"
                :value="dashboardStore.entDashboard[item.prop] || 0"
                :value-style="{ color: '#3089dc', cursor: 'pointer' }"
                @click="toPage(item)"
              />
            </div>
          </div>
        </PageMain>
      </el-col>
      <el-col :span="12">
        <PageMain title="设备资产">
          <div class="flex flex-content-between">
            <div v-for="item in deviceConfig" :key="item.name" class="flex-1">
              <el-statistic
                class="text-center" :title="item.name" :value="get(dashboardStore.entDashboard, item.prop, 0)"
                :value-style="{ color: '#3089dc', cursor: 'pointer' }"
                @click="toPage(item)"
              />
            </div>
          </div>
        </PageMain>
      </el-col>
      <el-col :span="24">
        <YongDianLiangDay />
      </el-col>
      <el-col :span="24">
        <YongDianLiang />
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.dashboard {
  padding: 10px;

  :deep(.main-container) {
    padding: 10px;
  }

  :deep(.page-main) {
    margin: 0;
    margin-bottom: 10px;
  }
}
</style>
